Master Layout Integration

  • Steps

    1.Layout of different pages


    There are 4 pages in the above image. Some sections (header, left sidebar, footer ) are common to all these pages. Html code of common sections are duplicated in each pages. This approach is difficult for maintaining the layouts We can use concept of master layout to avoid the duplication of html code of common sections.

    2. Concept of master layout

    3. Steps to implement master page

    1. Create a master.blade.php in resources/views/layouts/

    2. add Html code of common sections into the master.blade.php 

    
                    <html>
                    <head>
                      <title>
                      </title>
                    </head>
                    <body>
                            <header>

                            </header>

                            <sidebar>

                            </sidebar>

                            <main>

                            </main>

                            <footer>

                            </footer>

                    </body>
                    </html>

    3. Add @Yield Directives. A yield directive is used during template processing to indicate where things go

    
                    <html>
                    <head>
                      <title>

                                 @yield('title')

                      </title>
                    </head>
                    <body>
                            <header>

                            </header>

                            <sidebar>

                            </sidebar>

                            <main>

                                    @yield('content')

                            </main>

                            <footer>

                            </footer>

                    </body>
                    </html>
    1. Note that the two yields 'title' and 'content'.
    2. We can use many number of yields in a master blade.
    3. We must define content of each yields in the child blades
    4. using @section() and @endsection for defining the content of each yield

    4. Using the Layout

    1. extend child blade from master

    
                     @extends('layouts.master')

    2. Defind content of each yield() used in the master.blade.php

    
                     @section('title','Home Page')
                    
    
                     @section('content')

                  <div class='container'>
                    <div class='row'>
                      <div class='col-md-12'>
                        <h1>Hello World</h1>
                      </div>
                    </div>
                  </div>

                   @endsection

    5. Complete code of a child blade

    
                       @extends('layouts.master')

                       @section('title','Home Page')

                       @section('content')

                              <div class='container'>
                                <div class='row'>
                                  <div class='col-md-12'>
                                    <h1>Hello World</h1>
                                  </div>
                                </div>
                              </div>

                     @endsection